<template>
    <div id="home">
        <div id="Home">
            <Vheader/>
            <div class="home-grids">
                <ul class="home-nav-bar" >
                    <li class="grids-item" v-for="(item,i) in scrollView" :key="i"><a :href="item.href"><img :src="item.imgsrc" alt="" /><span class="grids-items-text">{{ item.text }}</span></a></li>
                </ul>
            </div>
            <VBanner/>
            <Vlists/>
        </div>
    </div>
</template>
<script>
import Vheader from './../template/header.vue'
import VBanner from './../template/HomeBanner'
import Vlists from './../template/lists'
//tabbar
export default {
    name:'',
    components: {
       Vheader,
       VBanner,
       Vlists       
    },
    data(){
        return {
            scrollView:[
                {href:'#1',imgsrc:require('./../assets/grids-icon-01.png'),text:'Bracelets'},
                {href:'#2',imgsrc:require('./../assets/grids-icon-02.png'),text:'Rings'},
                {href:'#3',imgsrc:require('./../assets/grids-icon-03.png'),text:'Personalized'},
                {href:'#4',imgsrc:require('./../assets/grids-icon-04.png'),text:'Accessories'},
                {href:'#5',imgsrc:require('./../assets/grids-icon-05.png'),text:'More'}
            ]
        }
    }
}
</script>
<style>
</style>
